var React = require('react');
var Util = require("../util/util.js");
var _ = require('underscore');
var classNames = require('classnames');
require('./pagination.scss');
var stretchLength = 3;
var Pagination = React.createClass({
  propTypes() {
    return {
      onJump: React.PropTypes.func,
      onSelect: React.PropTypes.func,
      total: React.PropTypes.number,
      pageNo: React.PropTypes.number,
      pageCount: React.PropTypes.number
    }
  },
  getInitialState() {
    return {
      pageNo: this.props.pageNo || 1,
      pageSize:this.props.pageSize || 10,
      total:this.props.total,
      jumpPage:"",
      notSearch: false
    };
  },
  componentWillReceiveProps:function(newProps){
    var { pageNo,total,pageSize,notSearch } = this.state;
    var prevTotal = total;
    total = newProps.total;
    if(total != prevTotal){
      pageNo = 1;
    }
    var pageCount = total % pageSize == 0 ? total / pageSize : parseInt(total / pageSize) + 1;
    this.renderPagination(pageNo);
    this.setState({
      pageNo: pageNo,
      pageCount: pageCount,
      total:total,
      pageSize:pageSize,
      notSearch: notSearch
    });
    return false;
  },
  componentDidMount:function(){
    var {total,pageSize,pageNo} = this.state;
    var pageCount = total % pageSize == 0 ? total / pageSize : parseInt(total / pageSize) + 1;
    this.setState({
      pageNo: pageNo || 1,
      pageSize:pageSize || 10,
      pageCount: pageCount,
      total:total
    });
  },
  renderPagination(pageNo) {
    var {total} = this.props;
    var { pageCount } = this.state;
    var array = [],start,end;
    if(pageNo > stretchLength){
      if(pageNo > (pageCount - stretchLength)){
        end =  pageNo + (pageCount - pageNo);
        start = (pageNo - stretchLength);
      }else{
        end = pageNo + stretchLength;
        start = pageNo - stretchLength;
      }
    }else{
      start = 1;
      end = pageCount <= (stretchLength * 2) ? pageCount : stretchLength * 2;
    }
    array = _.range(start,end+1);
    return array;
  },
  pageSizeChange:function(e){
    var {total,notSearch} = this.props;
    var pageSize = parseInt(e.target.value);
    var pageCount = total % pageSize == 0 ? total / pageSize : parseInt(total / pageSize) + 1;
     this.setState({
       pageSize: e.target.value,
       pageCount:pageCount,
       notSearch: true
     })
    var pagination = this.state;
    pagination.pageNo = 1;
    pagination.pageSize = pageSize;
    this.props.onPageChange(pagination);
  },
  onSelect(pageNo) {
    this.setState({
      pageNo,
      notSearch: true
    });
    var pagination = this.state;
    pagination.pageNo = pageNo;
    this.props.onPageChange(pagination);
  },
  paging(action) {

    var { pageNo } = this.state;
    var pagination = this.state;
    if (action === 'prev') {
      this.setState({
        pageNo: pageNo - 1,
        notSearch: true
      });
      pagination.pageNo = pageNo - 1;
    }
    if (action === 'next') {
      this.setState({
        pageNo: pageNo + 1,
        notSearch: true
      });
      pagination.pageNo = pageNo + 1;
    }
    this.props.onPageChange(pagination);
  },
  changeValueByNum(evt){
    var { pageCount } = this.state;
    var jumpNo = evt.target.value;
    var noReg = /^\d+$/;
    if(jumpNo == '' || jumpNo == null){
      this.setState({jumpPage:""});
      return;
    }
    if(!noReg.test(jumpNo)){
      Util.alertMessage('请输入正确格式的页码！');
      this.setState({jumpPage:""});
      return;
    }else{
      if(0 < jumpNo && jumpNo <= pageCount){
        this.setState({jumpPage:parseInt(jumpNo)});
      }else{
        Util.alertMessage('您输入的页码不存在！');
        this.setState({jumpPage:""});
      }
    }
  },
  jumpPageByNum(){
    var { jumpPage } = this.state;
    var pagination = this.state;
    pagination.pageNo = jumpPage;
    this.props.onPageChange(pagination);
    this.setState({
      pageNo: pagination.pageNo,
      jumpPage:"",
      notSearch: true
    });
  },
  render() {
    var { pageNo,total,pageCount,pageSize,jumpPage } = this.state;
    var itemsArray = this.renderPagination(pageNo);
    return (<div className="pagination-mod clearfix">
      <div className="operation pull-left">
        <span>合计:<label>{total}</label>条</span>
        <b>&nbsp;</b>
        <span>每页: <select defaultValue={pageSize} refs="pageSize" className="min" onChange={this.pageSizeChange}><option value="10">10</option><option value="30">30</option><option value="300">300</option></select> 条,  共<label>{pageCount}</label>页</span>
        <span>，跳转到：
          <input style={{width: 30,paddingLeft:0,textAlign:'center'}} onChange={this.changeValueByNum} type="text" className="min" value={jumpPage}/>
          <button style={{minWidth: 40,width: 40,marginLeft: 10}} onClick={this.jumpPageByNum} className="button min paging">GO</button>
        </span>
      </div>
      <div style={{paddingTop: 2}} className="page-wrapper pull-right clearfix">
        <button className={classNames('button small prev paging',{disabled:pageNo <= 1})} disabled={pageNo <= 1 ? 'disabled' : ''} onClick={()=>{this.paging('prev')}}>上一页</button>
        {_.map(itemsArray, (item) => {
          return (
            <button key={_.uniqueId('_page_item')} className={classNames('button min paging', {active: item === pageNo})}
              onClick={() => {this.onSelect(item)}}>{item}</button>
          );
        })}
        <button className={classNames('button small next paging',{disabled:pageNo >= pageCount})}  disabled={pageNo >= pageCount ? 'disabled' : ''} onClick={()=>{this.paging('next')}}>下一页</button>
      </div>
    </div>);
  }
});

module.exports = Pagination;